<template>
    <page-wrapper>
        <table-search @search="search(1)" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-input v-model.trim="form.orderName" placeholder="模板名称" />
                </form-item>
                <form-item label="">
                    <a-select v-model="form.leaderName" style="width:140px;" allowClear placeholder="请选择负责人">
                        <a-select-option :value="item.userName" v-for="item in userList" :key="item.userId">{{item.userName}}</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-select v-model="form.valid" style="width:120px;" allowClear placeholder="请选择状态">
                        <a-select-option :value="item.value" v-for="item in workValidStatus" :key="item.value">{{item.name}}</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-input v-model.trim="form.keyword" placeholder="关键词搜索" />
                </form-item>
            </template>
            <template slot="extra">
                <a-button class="filter-item" type="primary" :disabled="hasPerm(['sys:template:add'])" icon="plus" @click="addInfo()">新增工单模板</a-button>
                <!-- <a-button
                    class="filter-item btn_space"
                    type="danger"
                    @click="remove()"
                    :disabled="!selectionBox.length || hasPerm(['sys:template:delete'])"
                    icon="delete"
                    >删除</a-button
                > -->
            </template>
        </table-search>
        <div class="table_scroll">
            <table-list
                :loading="loading"
                :columns="columns"
                rowKey="id"
                :pagination="pagination"
                :data="list"
                :scroll="{x:1500}"
            >
                <template slot="time" slot-scope="{ text }">
                    <span v-if='text.num1'>{{text.num1}}日-{{text.num2}}日</span>
                </template>
                <template slot="endTime" slot-scope="{ text }">
                    <span v-if='text.num3'>{{text.num3}}日</span>
                </template>
                <template slot="valid" slot-scope="{ text }">
                    <field-tag
                        :value="text"
                        type="value"
                        showType="name"
                        :data="workValidStatus"
                    ></field-tag>
                </template>
                <template slot="action" slot-scope="{ text }">
                    <a-button
                        size="small"
                        type="primary"
                        :disabled="hasPerm(['sys:template:update'])"
                        @click="addInfo(text)"
                        >编辑</a-button
                    >
                    <a-button
                        type="danger"
                        size="small"
                        class="btn_space"
                        :disabled="hasPerm(['sys:template:delete'])"
                        @click="remove(text)"
                    >
                        删除
                    </a-button>
                </template>
            </table-list>
        </div>

        <template v-if="isShowInfo">
            <work-info :info="itemInfo" :deptList="deptList" :expandDept="expandDeptData" :userList="userList" @cancel="isShowInfo=false" @submit="submit"/>
        </template>

        <!-- <template v-if="isShowProcess">
            <work-process :info="itemInfo" @cancel="isShowProcess=false"/>
        </template> -->
        
    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
import { columns } from './columns';
import {workValidStatus,workOrderStatus} from './dictionary'
import {remoteList,deleteInfo} from '@/api/workorder'
import userApi from '@/api/system/user'
import WorkInfo from './components/info.vue'
// import WorkProcess from './components/process.vue'
import deptApi from '@/api/system/dept';

export default {
    name: 'WorkorderList',
    mixins: [table],
    components: {
        WorkInfo,
        // WorkProcess
    },
    data() {
        let originForm = {
            orderName: undefined,
            leaderName: undefined,
            valid: undefined,
            keyword: '',
        };
        return {
            originForm,
            workOrderStatus,
            workValidStatus,
            form: {
                ...originForm,
                isCycle:'Y'
            },
            columns,
            userList:[],
            deptList:[],
            expandDeptData:[],
            itemInfo: null,
            isShowInfo: false,
            isShowProcess:false,
        };
    },
    async created(){
        this.loading = true;
        await this.getResource();
        this.search(1);
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                if(page){
                    this.form.page = page
                }
                this.list = []
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
                this.selectionBox = []
            } finally {
                this.loading = false;
            }
        },
        //删除
        remove(item = '') {
            this.$confirm({
                title: '提示',
                content: '确定要删除工单模板？',
                okText: '确定',
                cancelText: '取消',
                onOk:async ()=>{
                    try{
                        let ids=[];
                        if (item) {
                            ids = [item.id];
                        } else {
                            let selectionBox = this.selectionBox;
                            selectionBox.map(async item => {
                                ids.push(item.id);
                            });
                        }
                        await deleteInfo({ids});
                        this.$message.success('删除成功!');
                        if(ids.length==this.list.length){
                            this.search(1);
                        }else{
                            this.search();
                        }
                    }catch(err){

                    }
                },
                onCancel() {}
            });
        },
        //显示添加
        addInfo(item = {}) {
            this.isShowInfo = true;
            this.itemInfo = item;
        },
        showProcess(item){
            this.isShowProcess = true;
            this.itemInfo = item;
        },
        submit() {
            this.isShowInfo = false;
            this.itemInfo = {}
            this.search(1);
        },
        async getResource(){
            let res = await userApi.remoteList({page:1,size:500});
            let {list} = res.data;
            this.userList = list;
            // let userInfo = getCache('userInfo') || { userId: '' };
            // let { userId } = userInfo;
            let deptResult = await deptApi.remoteList();
            this.deptList = deptResult.data;
            this.expandDeptData = [];
            this.expandData(deptResult.data);
        },
        //多层次数据展开
        expandData(data){
            if(Array.isArray(data)){
                data.map(item=>{
                    this.expandDeptData.push(item);
                    if(item.children && item.children.length){
                        this.expandData(item.children)
                    }
                })
            }
        }
    }
};
</script>
